<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';
const router = useRouter();

let username = ref("");
let password = ref("");

//登录
const  doLogin=async  ()=>{
  try{
    let res=await axios.post('/api/login',{
      username:username.value,
      password:password.value
    })
    console.log(111,res);
    if(res.data.code===200){
      // 存储token
      window.sessionStorage.setItem('token',res.data.data.token)
      window.sessionStorage.setItem('user',JSON.stringify(res.data.data.user))
      // 提示-->跳转页面
      ElMessage({
          message: res.data.message,
          type: 'success',
      })
      router.push('/')
    }else if(res.data.code===102){
      // 提示-->停留在登录页
      ElMessage({
        message:res.data.message,
        type:'warning'
      })
    }else{
      console.log(res.data.message);
    }
  }catch(err){
    console.log(err);
  }
}
</script>

<template>
  <div class="login">
    <div class="top">
      <div class="logo-container">
        <img src="@/assets/logo3.png" alt="Logo" class="logo" />
      </div>
    </div>
    <div class="main">
      <div class="login-page">
        <h2>用户登录</h2>
        <form @submit.prevent="doLogin">
          <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" v-model="username" required />
          </div>

          <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="password" required />
          </div>

          <button type="submit">登录</button>
          <div class="otherLink">
            <!-- 这里href属性的值javascript:void(0)是一个 JavaScript 表达式，void(0)表示返回undefined，这样浏览器就不会执行任何跳转操作。不过这种方法将阻止跳转的逻辑和 HTML 标签紧密耦合在一起，不如使用事件处理函数灵活。 -->
            <a href="javascript:void(0)" class="fogotPas" @click="isForget"
              >忘记密码？</a
            >
            <a href="/register" class="newUserReg">新用户注册>></a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login {
  font-family: "Microsoft YaHei";
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  height: 69px;
  margin: auto;
  overflow: hidden;
  background-color: #fff;
  border-bottom: 2px solid #e60000;
}

.logo {
  max-width: 300px;
  height: auto;
  position: absolute;
  z-index: 1000;
}

.main {
  background-color: #f6f4f5;
  width: 100%;
  height: 500px;
}

.login-page {
  max-width: 1000px;
  height: 460px;
  margin: 20px auto;
  padding: 40px 200px 20px 200px;
  /* text-align: center; */
  background-color: #fff;
}

.logo-container {
  margin-bottom: 20px;
  /* text-align: center; */
}

h2 {
  border-left: 3px solid red;
  padding-left: 12px;
  margin-bottom: 50px;
  font-weight: bold;
}
.form-group {
  display: flex;
  align-items: center;
  margin: 30px 20px;
}

label {
  margin-right: 10px;
  width: 70px;
}

input {
  /* width: calc(100% - 22px); 减去左右padding的宽度 */
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  width: 380px;
  text-align: center;
  text-decoration: none;
  background: #e60000;
  font-size: 16px;
  color: #fff;
  letter-spacing: 3px;
  border: none;
  margin-left: 50px;
}

button:hover {
  background-color: #e20000;
}

.otherLink {
  margin: 25px 0 0 50px;
  width: 380px;
  overflow: hidden;
  line-height: 24px;
}
.otherLink a {
  color: #666a6b;
  font-size: 14px;
  text-decoration: none;
}
.otherLink a:hover {
  text-decoration: underline;
}
.fogotPas {
  float: left;
}
.newUserReg {
  float: right;
}
</style>
